<template>
  <div class="home_main">
    <div class="home_header">
      <img class="header_back" src="back.png"  @click="back_click"/>
      <img class="header_msg" src="my_msg.png" />
    </div>
    <div class="vip_head"></div>
    <div class="text_user">
      <div class="user_text">
        <div class="user_text_btn">
          <div class="user_btn">黄金贵宾</div>
          <div class="user_bbs">我的社区</div>
          <br />
        </div>
        <div class="home_wrap">
          <div class="home_order_status">
            <div class="img_item">
              <img class="img_body" src="table.png" />
              <div class="img_text">
                <div class="img_text_body">全部订单</div>
              </div>
            </div>
            <div class="img_item">
              <img class="img_body" src="money.png" />
              <div class="img_text">
                <div class="img_text_body">待付款</div>
              </div>
            </div>
            <div class="img_item">
              <img class="img_body" src="time.png" />
              <div class="img_text">
                <div class="img_text_body">未出行</div>
              </div>
            </div>
            <div class="img_item">
              <img class="img_body" src="appraise.png" />
              <div class="img_text">
                <div class="img_text_body">待评价</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="home_list_card"></div>
      <ul class="home_list">
        <li id="btnCommonInfo" data-_id="usagemessage">
          <em>旅客/地址/发票抬头</em>
          常用信息
        </li>
        <li id="btnFavorite" data-_id="favorite">
          <em>降价商品有提醒</em>
          我的收藏
        </li>
        <li id="btnHistory" data-_id="history">
          <em>近15天访问记录</em>
          浏览历史
        </li>
        <li id="btnCooperation" data-_id="cooperation">
          <em>供应商加盟/代理合作</em>
          我要合作
        </li>
      </ul>
      <section class="row">
        <div class="btnGO"></div>
      </section>
      <section class="slogan">携程在手，说走就走</section>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    back_click() {
      this.$router.replace('home')
    }
  }
};
</script>

<style>
.header_back {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  margin-top: 3px;
}
.header_msg {
  width: 25px;
  height: 25px;
  border-radius: 5px;
  float: right;
}
.home_header {
  height: 30px;
  width: 100%;
}
.home_main {
  height: 500px;
  width: 99%;
  background: rgb(128, 189, 240);
  overflow: hidden;
}
.text_user {
  position: absolute;
  background: #f5f5f5;
  width: 99%;
  height: 100%;
  left: 0px;
  top: 15%;
  border-radius: 10px;
  z-index: 1;
}
.user_text {
  width: 100%;
  height: 130px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  background: rgb(252, 252, 250);
  top: 0px;
  z-index: 1;
}
.text_img {
  z-index: 2;
}
.user_img {
  border-radius: 100px;
  width: 80px;
  height: 80px;
}
.user_text_btn {
  /* position: absolute;
    bottom: -38px;
    height: 48px;
    line-height: 48px;
    vertical-align: middle;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px 12px 0 0;
    padding-left: 103px;
    overflow: hidden; */
  display: flex;
  width: 100%;
  height: 40px;
  vertical-align: middle;
  padding-left: 103px;
  margin-bottom: 5px;
}
.user_btn {
  font-size: 12px;
  color: #5e8aa6;
  background: rgb(17, 166, 255, 0.1);
  display: inline-block;
  height: 23px;
  line-height: 23px;
  padding: 0 10px;
  border-radius: 50px;
  font-size: 12px;
  margin-right: 10px;
  margin-top: 10px;
  /* margin-top: 5px;
    height: 20px;
    margin-left: 5px;
    width: 60px;
    border-radius: 5px;
    text-align: center; */
}
.user_bbs {
  background: rgba(247, 148, 100, 0.15);
  color: #967363;
  letter-spacing: 0;
  line-height: 24px;
  display: inline-block;
  height: 23px;
  padding: 0 10px;
  border-radius: 50px;
  font-size: 12px;
  margin-right: 10px;
  margin-top: 10px;
  /* margin-top: 5px;
    font-size: 10px;
    color: rgb(139, 139, 136);
    background: rgb(252, 214, 189);
    height: 20px;
    margin-left: 5px;
    width: 60px;
    border-radius: 5px;
    text-align: center;
    letter-spacing: 0;
    line-height: 24px; */
}
.home_wrap {
  position: relative;
  z-index: 13;
  margin-top: 98px;
  background: #f5f5f5;
  margin: 0;
  padding: 0;
  display: flex;
}
.home_order_status {
  margin-bottom: 10px;
  overflow: hidden;
  color: #333;
  background-color: #fff;
  display: flex;
  height: 80px;
  width: 100%;
}
.img_body {
  flex: 1;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  align-content: center;
}
.img_text {
  width: 100%;
  margin: 0 auto;
  display: flex;
  font-size: 10px;
}
.img_text_body {
  flex: 1;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  align-content: center;
}
.img_item {
  flex: 1;
  text-align: center;
}
.home_list_card {
  margin-bottom: 5px;
  overflow: hidden;
  background: #fff;
  border-radius: 0;
  height: 140px;
}
/* .home_list{
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
    border-radius: 0;
    height: 200px;
} */
.home_list {
  color: #333;
  padding-top: 0;
  background: none;
  border-top: 0 none;
  margin-bottom: 10px;
  margin-top: 10px;
  overflow: hidden;
  background: #fff;
  padding-left: 0px;
}
ul {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}
li {
  display: list-item;
  text-align: 12px;
}
.home_list li:first-chile {
  border-top: 0 none;
}
.home_list li em {
  float: right;
  font-size: 13px;
  color: #999;
  font-style: normal;
}
.home_list li:after {
  position: absolute;
  right: 10px;
  top: 50%;
  display: inline-block;
  content: "";
  width: 7px;
  height: 7px;
  border: solid #999;
  border-width: 1px 1px 0 0;
  transform: translate(0, -50%) rotate(45deg);
}
.home_list li {
  position: relative;
  padding: 0 25px 0 0;
  height: 49px;
  line-height: 49px;
  margin-left: 16px;
  font-size: 16px;
  list-style-type: none;
  padding-top: 1px;
  border-top: 1px solid #efefef;
}
.row {
  /* display: -webkit-box;
    display: -ms-flexbox; */
  display: flex;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  padding: 20px 0;
  -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
  margin-bottom: 10px;
}
.slogan {
  width: 136px;
  height: 0;
  padding-top: 21px;
  background: url(//pic.c-ctrip.com/platform/h5/my/home/slogan.png) 0 0
    no-repeat;
  background-size: 136px auto;
  overflow: hidden;
  margin: 30px auto;
}
</style>
